<template>
  <div class="todo-item" :class="{ completed: completed }">
    <input
      type="checkbox"
      :checked="completed"
      @change="toggleCompletion"
    />
    <span class="todo-title">{{ title }}</span>
    <button @click="removeTodo" class="remove-btn">删除</button>
  </div>
</template>

<script>
export default {
  name: 'nnnn',
  props: {
    title: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleCompletion() {
      this.$emit('update:completed', !this.completed);
    },
    removeTodo() {
      this.$emit('remove-todo');
    }
  }
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item.completed .todo-title {
  text-decoration: line-through;
  color: #888;
}

.todo-title {
  flex-grow: 1;
  margin-left: 10px;
}

.remove-btn {
  background: none;
  border: 1px solid #ff5a5f;
  color: #ff5a5f;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.remove-btn:hover {
  background-color: #ff5a5f;
  color: white;
}
</style>